<template>

    <el-form :inline="true" size="small">
        <el-form-item label="状态">
            <el-select v-model="query.lstatus" style="width:100px;">
                <el-option label="全部" value="" />
                <el-option v-for="(name,status) in statusMap" :label="name" :value="status" />
            </el-select>
        </el-form-item>
        <el-form-item label="编号">
            <el-input v-model="query.lid"/>
        </el-form-item>
        <el-form-item label="事由">
            <el-input v-model="query.lcause"/>
        </el-form-item>

        <el-form-item>
            <el-button :icon="Search" type="primary" @click="getPage(1)" >查询</el-button>
            <el-button :icon="Plus" type="primary" @click="lAddRef.open()" >新增</el-button>
            <el-button :icon="Delete" type="danger" @click="execMultiDel" >删除</el-button>
        </el-form-item>

    </el-form>

    <oa-table :page="page" :query="query" :getPage="getPage">
        <el-table :data="page.list" @selection-change="onSelectionChange">
            <el-table-column type="selection"/>
            <el-table-column prop="lid" label="编号" width="70" />
            <el-table-column prop="ename" label="申请人" width="100" />
            <el-table-column label="起止时间" width="280" >
                <template #default="{row}">
                    {{ row.lstart }} ~ {{ row.lend }}
                </template>
            </el-table-column>
			<el-table-column prop="type" label="类型" width="100">
			    <template #default="{row}">
			        <el-tag :type="getTagType(row.type)" effect="dark">
			            {{ getTypeLabel(row.type) }}
			        </el-tag>
			    </template>
			</el-table-column>
            <el-table-column prop="lcause" label="详情" width="120">
                <template #default="{row}">
                    <span 
                        @dblclick="showFullDetail(row)"
                        :title="row.lcause.length > 10 ? '双击查看全部' : ''"
                        style="cursor: pointer;"
                    >
                        {{ row.lcause.length > 10 ? row.lcause.substring(0, 10) + '...' : row.lcause }}
                    </span>
                </template>
            </el-table-column>
		
            <el-table-column prop="lSubmitDate" label="提交时间" width="180" />
            <el-table-column prop="lStatusName" label="状态" width="70" />

            <el-table-column label="操作" width="130" fixed="right" >
                <template #default="{row}">
                    <template v-if="row.lstatus === 0" >
                        <el-tooltip content="修改" effect="light">
                            <el-button @click="lUpdRef.open(row)" :icon="Edit" type="primary" size="small" circle ></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" effect="light">
                            <el-button @click="execDel(row.lid)" :icon="Delete" type="danger" size="small" circle ></el-button>
                        </el-tooltip>
                        <el-tooltip content="提交" effect="light">
                            <el-button @click="execSubmit(row.lid)" :icon="Finished" type="success" size="small" circle ></el-button>
                        </el-tooltip>
                    </template>
                    <template v-if="row.lstatus === 3" >
                        <el-tooltip content="确认" effect="light">
                            <el-button @click="execBack(row.lid)" :icon="Back" type="primary" size="small" circle ></el-button>
                        </el-tooltip>                        
                    </template>
                    
                </template>
            </el-table-column>
        </el-table>
    </oa-table>

    <l-add ref="lAddRef" @ok="getPage(1)"></l-add>

    <l-upd ref="lUpdRef" @ok="getPage(page.current)"></l-upd>

</template>

<script setup>
import {ref,reactive} from 'vue'
import req from '@/request'
import OaTable from '@/components/OaTable.vue'
import { Edit,Delete,Finished, Back, Search, Plus } from '@element-plus/icons-vue';
import { ElMessage,ElMessageBox } from 'element-plus';


const statusMap={
    0:'未提交',
    1:'已提交',
    2:'已驳回',
    3:'已批准',
    4:'已确认'
};

const TypeOptions = [
  { value: 1, label: '请假' },
  { value: 2, label: '工作汇报' },
  { value: 3, label: '出差' }
]

const query = reactive({
    pageNum:1,
    pageSize:5,
    lid:'',
    lcause:'',
    lstatus:''
});

// 获取类型标签
const getTypeLabel = (type) => {
    const option = TypeOptions.find(item => item.value === type);
    return option ? option.label : '未知';
}

// 根据类型返回不同的tag样式
const getTagType = (type) => {
    const types = {
        1: 'primary',   // 请假 - 蓝色
        2: 'success',   // 工作汇报 - 绿色
        3: 'warning'    // 出差 - 黄色
    };
    return types[type] || 'info';  // 默认灰色
}

//双击详情展示全部
const showFullDetail = (row) => {
    ElMessageBox.alert(row.lcause, '详情内容', {
        confirmButtonText: '关闭',
        customClass: 'detail-message-box'
    });
}

const page = ref({
    total:0,
    list:[]
});

const getPage = async (pageNo = 1)=>{
    query.pageNum = pageNo;
    const res = await req.get("/leave/apprev",{params:query});
    page.value = res.data;  
    console.log("分页信息：",page.value)
    //使用获取的分页数据相关值覆盖 query.pageNum  和 query.pageSize
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
}

getPage(1);

const ids = ref([]);
const onSelectionChange = selections =>{
    ids.value = selections.map(item=>item.lid);
}


//新增
import LAdd from './LAdd.vue'
const lAddRef = ref(null);


//修改
import LUpd from './LUpd.vue'
const lUpdRef = ref(null);

//单删除
const execDel = async id=>{
    await ElMessageBox.confirm(
        "您确定要删除该请假申请吗？",
        "警告",
        {
            confirmButtonText:'确定删除',
            cancelButtonText:'不删了',
            type:'warning'
        }

    );

    await req.delete('/leave/apprev/'+id);
    getPage(page.value.current);
    ElMessage.success('删除请假申请成功！');
}

//多删除
const execMultiDel = async()=>{
    if(!ids.value || !ids.value.length){
        ElMessage.error('请选择至少一条数据！');
        return;
    }

    await ElMessageBox.confirm(
        "您确定要删除选中的请假申请吗？",
        "警告",
        {
            confirmButtonText:'确定删除',
            cancelButtonText:'不删了',
            type:'warning'
        }

    );

    await req.delete("/leave/apprev",{data:ids.value})
    getPage(page.value.current);
    ElMessage.success('删除请假申请成功！');

}

//提交
const execSubmit = async id=>{
    await ElMessageBox.confirm(
        "您确定要提交该请假申请吗？一旦提交将不能修改。",
        "警告",
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }

    );
        
    await req.put("/leave/apprev/submit/"+id)
    getPage(page.value.current);
    ElMessage.success('提交请假申请成功！');
    
}

//执行销假
const execBack = async id=>{
    await ElMessageBox.confirm(
        "您确定要对该请假申请进行销假吗？",
        "警告",
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }

    );
    await req.put("/leave/apprev/back/"+id)
    getPage(page.value.current);
    ElMessage.success('请假申请销假成功！');
}

</script>

<style scoped>
	/* 详情弹窗样式 */
	:deep(.detail-message-box) {
	    width: 80%;
	    max-width: 800px;
	}
	:deep(.detail-message-box .el-message-box__content) {
	    white-space: pre-wrap;
	    word-break: break-all;
	    max-height: 60vh;
	    overflow-y: auto;
	}
</style>